<template>
  <div class="app-container">

        <!-- 搜索 -->
    <page-search
            ref="searchRef"
            :search-config="searchConfig"
            @query-click="handleQueryClick"
            @reset-click="handleResetClick"
    />
    <!-- 列表 -->
    <page-content
            ref="contentRef"
            :content-config="contentConfig"
            @add-click="handleAddClick"
            @edit-click="handleEditClick"
            @search-click="handleSearchClick"
            @toolbar-click="handleToolbarClick"
            @operat-click="handleOperatClick"
    >
    </page-content>


    <!-- 新增 -->
    <page-modal
            ref="addModalRef"
            :modal-config="addModalConfig"
            @submit-click="handleSubmitClick">
    </page-modal>

    <!-- 编辑 -->
    <page-modal
            ref="editModalRef"
            :modal-config="editModalConfig"
            @submit-click="handleSubmitClick">
    </page-modal>
  </div>
</template>

<script setup lang="ts">
  import type {IOperatData} from "@/hooks/usePage";
  import usePage from "@/hooks/usePage";
  import contentConfig from "./config/content";
  import addModalConfig from "./config/add";
  import editModalConfig from "./config/edit";
  import searchConfig from "./config/search";
  import SysFileAPI from "@/api/sysFile/index";
  import {useRequestStore} from '@/store';

  const {
    searchRef,
    contentRef,
    addModalRef,
    editModalRef,
    handleQueryClick,
    handleResetClick,
    handleAddClick,
    handleSubmitClick,
    handleSearchClick,
    handleRefreshClick,
    handleEditClick,
  } = usePage();
  const requestStore = useRequestStore();
  // 其他工具栏
  function handleToolbarClick(name: string) {
    if (name === "import") {

    }
  }

  // 其他操作列
  function handleOperatClick(data: IOperatData) {

  }


  onMounted(() => {

  });

  onBeforeMount(async () => {

  });
</script>
